<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据轮播展示</title>
  <style>
    /* 基础样式重置 */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: '微软雅黑', sans-serif;
      background-color: #f5f5f5;
      color: #333;
    }

    /* 容器样式 */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* 顶部图片栏 */
    .top-image-bar {
      display: flex;
      gap: 10px;
    }

    .image-slot {
      flex: 1;
      height: 150px;
      background-color: #f0f0f0;
      border: 2px solid #e00;
      border-radius: 4px;
    }

    .image-slot.small {
      flex: 0.5;
    }

    /* 内容区块布局 */
    .content-block {
      display: flex;
      gap: 20px;
    }

    .text-animation {
      flex: 1;
      border: 2px solid #e00;
      padding: 20px;
    }

    .text-lines {
      margin-top: 15px;
    }

    .line {
      height: 8px;
      background-color: #e00;
      margin-bottom: 10px;
    }

    .line-short { width: 30%; }
    .line-medium { width: 60%; }
    .line-long { width: 100%; }

    .empty-area {
      flex: 2;
      border: 2px solid #e00;
      min-height: 300px;
    }

    /* 轮播区域样式 */
    .carousel-container {
      flex: 1;
      background-color: white;
      border: 2px solid #e00;
      padding: 20px;
      overflow: hidden;
    }

    /* 卡片样式 */
    .carousel-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease;
    }

    .carousel-card.active {
      opacity: 1;
      transform: translateY(0);
    }

    .card-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 15px;
      background-color: #f0f0f0;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      color: #e00;
    }

    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .card-video {
      width: 100%;
      max-width: 300px;
      height: 180px;
      background-color: #f0f0f0;
      border-radius: 8px;
    }

    /* 控制按钮 */
    .controls {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
    }

    .control-btn {
      padding: 8px 16px;
      background-color: white;
      border: 1px solid #e00;
      color: #e00;
      cursor: pointer;
      transition: all 0.3s;
    }

    .control-btn:hover {
      background-color: #ffeeee;
    }
  </style>
</head>
<body>
  <!-- 虚拟数据：
      joan:[
      {
        img:"xxx",
        text:"xxxx","xxx"....
        video:"xxx"
      },
      {
       img:"xxx",
        text:"xxxx","xxx"....
        video:"xxx"
      }
        ]

</>
 ->
 ->
 -->
 <div class="container">
  <!-- 顶部图片栏（固定不变） -->
  <div class="top-image-bar">
    <!-- 数据1 -->
    <div class="image-slot"></div>
    <div class="image-slot"></div>
    <div class="image-slot"></div>
  </div>
  
  <!-- 内容区块 -->
  <div class="content-block">
    <div class="text-animation">
      <div class="text-lines"><!-- 文本通过JS注入 --></div>
    </div>
    <div class="empty-area"><!-- 视频通过JS注入 --></div>
  </div>
</div>
  <script>
    // 加载数据配置
    const config = {
      "joan": [
        {
          "text": ["操作指南-1", "优化键位点-2", "展示优点", "整体效果-4"],
          "video": "https://fastcdn.mihoyo.com/content-v2/hkrpg/155390/889ac78084949c04ef3ded4e071d8267_7012568287208503681.mp4",
          "image": "https://pp.myapp.com/ma_pic2/0/shot_11994436_1_1744270116/0"
        },
        {
          "text": ["文字效果2-1", "文字效果2-2", "文字效果2-3", "文字效果2-4"],
          "video": "https://fastcdn.mihoyo.com/content-v2/hkrpg/155366/036bd80d4a7cd14ee6dc070455fa55a0_3469131597849849325.mp4",
          "image": "https://pp.myapp.com/ma_pic2/0/shot_11994436_1_1744270116/0"
        },
        {
          "text": ["文字效果2-1", "文字效果2-2", "文字效果2-3", "文字效果2-4"],
          "video": "https://fastcdn.mihoyo.com/content-v2/hkrpg/155366/036bd80d4a7cd14ee6dc070455fa55a0_3469131597849849325.mp4",
          "image": "https://pp.myapp.com/ma_pic2/0/shot_11994436_1_1744270116/0"
        }
      ]
    };

    let currentIndex = 0;

    // 初始化顶部图片栏
    function initTopImage() {
      const imageSlots = document.querySelectorAll('.top-image-bar .image-slot');

      imageSlots.forEach((slot, index) => {
        // 如果当前索引对应的图片已经存在，则不清空
        if (slot.querySelector('img')) return;

        if (index === 0) {
          // 在第一个位置始终显示数据 1 的图片
          const img = document.createElement('img');
          img.src = config.joan[0].image; // 始终显示数据 1 的图片
          img.alt = `图片1`;
          img.style.width = '100%';
          img.style.height = '100%';
          img.style.objectFit = 'cover';
          slot.appendChild(img);
        } else if (index === currentIndex) {
          // 在当前索引位置显示当前数据的图片
          const img = document.createElement('img');
          img.src = config.joan[currentIndex].image;
          img.alt = `图片${currentIndex + 1}`;
          img.style.width = '100%';
          img.style.height = '100%';
          img.style.objectFit = 'cover';
          slot.appendChild(img);
        }
      });
    }

    // 初始化内容区块
    function initContent() {
      const textContainer = document.querySelector('.text-lines');
      const videoContainer = document.querySelector('.empty-area');
      
      // 清空现有内容
      textContainer.innerHTML = '';
      videoContainer.innerHTML = '';

      // 获取当前数据
      const currentData = config.joan[currentIndex];

      // 生成文字效果
      currentData.text.forEach((text, index) => {
        const p = document.createElement('p');
        p.textContent = text;
        p.style.opacity = '0';
        p.style.transition = 'opacity 0.5s ease';
        p.style.transitionDelay = `${index * 0.5}s`; // 每段文字延迟显示
        textContainer.appendChild(p);

        // 使用 setTimeout 改变 opacity
        setTimeout(() => {
          p.style.opacity = '1';
        }, 100); // 确保 DOM 渲染后再触发动画
      });

      // 生成视频元素
      const video = document.createElement('video');
      video.src = currentData.video;
      video.autoplay = true;
      video.controls = true;
      video.style.width = '100%';
      video.style.height = '100%';

      // 监听视频播放结束事件
      video.addEventListener('ended', () => {
        currentIndex = (currentIndex + 1) % config.joan.length; // 循环切换索引
        initContent(); // 切换到下一组数据
        initTopImage(); // 更新顶部图片
      });

      videoContainer.appendChild(video);
    }

    // 初始化页面
    window.onload = () => {
      initTopImage(); // 初始化顶部图片
      initContent(); // 初始化内容区块
    };
  </script>
</body>
</html>